<template>
	<!-- 选项卡 -->
	<scroll-view class="tabs-container" scroll-x>
		<view class="tabs-view">
			<view @click="hanldeClick(index)" v-for="(item,index) in data" :key="index" class="tabs-item-container"
				:style="{
        width:width
      }">
				<view class="tabs-item-content">
					<text class="tab-text" :class="[active == index ? 'active-text' : '']">
						{{item.text?item.text:item}}
					</text>
					<uni-icons class="icon-sort" :class="{'icon-sort-active':item.sortValue}" custom-prefix="iconfont"
						type="icon-back" :color="active == index?'#3FD3D1':'#545454'" size="28rpx" v-if="item.sort">
					</uni-icons>
					<view class="abs-border" :class="[active == index ? 'active-border' : '']"></view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			// 选项卡列表
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			active: {
				type: Number,
				default: 0
			},
			width: {
				type: String,
				default: "25%"
			}
		},
		methods: {
			// 导航栏选择
			hanldeClick(index) {
				this.$emit("change", index)
			}
		}
	}
</script>

<style lang="scss">
	.tabs-container {
		height: 106rpx;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.tabs-view {
			display: flex;
			flex-wrap: nowrap;
			height: 100%;

			.tabs-item-container {
				height: 100%;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.tabs-item-content {
					position: relative;
					display: flex;
					align-items: center;

					// 选项卡文字
					.tab-text {
						color: #666666;
						// writing-mode: horizontal-tb;
						white-space: nowrap;
						font-size: 28rpx;
						line-height: 34rpx;
						font-weight: 500;
					}

					.icon-sort {
						display: inline-block;
						transform: rotateZ(-90deg);
					}

					.icon-sort-active {
						transform: rotateZ(90deg);
					}

					.active-text {
						color: #3FD3D1;
					}

					// 底部滑条
					.abs-border {
						position: absolute;
						width: 60rpx;
						height: 4rpx;
						border-radius: 4rpx;
						background-color: #3FD3D1;
						opacity: 0;
						left: 50%;
						bottom: -8rpx;
						transform: translateX(-50%);
					}

					.active-border {
						opacity: 1 !important;

					}
				}

			}

		}

	}
</style>